/* --------------------------------------------------------------
   grid.css - mirror version of src/grid.css
-------------------------------------------------------------- */

/* A container should group all your columns. */
.container {
  width: <%= page_width %>px;
  margin: 0 auto;
}

/* Use this class on any div.span / container to see the grid. */
.showgrid { 
  background: url(src/grid.png); 
}

/* Body margin for a sensile default look. */
body {
  margin:1.5em 0;	
}


/* Columns
-------------------------------------------------------------- */

/* Sets up basic grid flaoting and margin. */
<%= (1..column_count).map {|c| "div.span-#{c}" }.join(", ") %> {
	float: left;
	margin-right: <%= gutter_width %>px;	
}

/* The last column in a row needs this class. */
div.last { margin-right: 0; }

/* Use these classes to set the width of a column. */
.span-1 {width: <%= column_width %>px;}
<% (2..column_count-1).each do |column| %>
  .span-<%= column %> {width: <%= (column_width + ((column - 1) * (column_width + gutter_width))).to_i %>px;<%= "margin: 0;" if column == column_count %>}
<% end %>
.span-<%= column_count %>, div.span-<%= column_count %> { width:<%= page_width %>px; margin:0; }


/* Add these to a column to append empty cols. */
<% (1..(column_count-1)).each do |column| %>
  .append-<%= column %> { padding-right: <%= (column * (column_width + gutter_width)).to_i %>px;}
<% end %>

/* Add these to a column to prepend empty cols. */
<% (1..(column_count-1)).each do |column| %>
  .prepend-<%= column %> { padding-left: <%= (column * (column_width + gutter_width)).to_i %>px;}
<% end %>


/* Border on right hand side of a column. */
div.border {
  padding-right: <%= (gutter_width * 0.5 - 1).to_i %>px;
  margin-right: <%= (gutter_width * 0.5).to_i %>px;
  border-right: 1px solid #eee;
}

/* Border with more whitespace, spans one column. */
div.colborder {
  padding-right: <%= (column_width - 0.5*gutter_width - 1).to_i %>px;
  margin-right: <%= (column_width - 0.5 * gutter_width).to_i %>px;
  border-right: 1px solid #eee;
}


/* Use these classes on an element to push it into the 
next column, or to pull it into the previous column.  */

<% (1..column_count).each do |column| %>
  .pull-<%= column %> { margin-left: -<%= (column * (column_width + gutter_width)).to_i %>px; }
<% end %>

<%= (1..column_count).map {|c| ".pull-#{c}" }.join(", ") %> {float: left; position:relative;}

<% (1..(column_count)).each do |column| %>
  .push-<%= column %> { margin: 0 -<%= (column * (column_width + gutter_width)).to_i %>px 1.5em <%= (column * (column_width + gutter_width)).to_i %>px; }
<% end %>

<%= (1..column_count).map {|c| ".push-#{c}" }.join(", ") %> {float: right; position:relative;}


/* Misc classes and elements
-------------------------------------------------------------- */

/* Use a .box to create a padded box inside a column.  */ 
.box { 
  padding: 1.5em; 
  margin-bottom: 1.5em; 
  background: #E5ECF9; 
}

/* Use this to create a horizontal ruler across a column. */
hr {
  background: #ddd; 
  color: #ddd;
  clear: both; 
  float: none; 
  width: 100%; 
  height: .1em;
  margin: 0 0 1.45em;
  border: none; 
}
hr.space {
  background: #fff;
  color: #fff;
}


/* Clearing floats without extra markup
   Based on How To Clear Floats Without Structural Markup by PiE
   [http://www.positioniseverything.net/easyclearing.html] */

.clearfix:after, .container:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.clearfix, .container {display: inline-block;}
* html .clearfix,
* html .container {height: 1%;}
.clearfix, .container {display: block;}

/* Regular clearing
   apply to column that should drop below previous ones. */

.clear { clear:both; }